import { createApp, h, reactive, Component, VNode } from "vue";
// import BasicModal from "./src/BasicModal.vue";
// import type { IProps } from "./src/BasicModal.vue";
// export default BasicModal;
import { isVNode } from "@/types/utils";

import { NModal, ModalProps, NCard } from "naive-ui";
import naive from "naive-ui";

interface IOptions extends ModalProps {
  // content?: Component | (() => VNode) | string;
  onConfirm?: () => void;
  subContent?: Component | (() => VNode) | string;
}

export const openModal = (props: IOptions) => {
  const renderFn = () => {
    const state = reactive({
      show: false,
    });

    // debugger;

    return {
      render: () => {
        return h(
          NModal,
          {
            ...props,
            show: state.show,
            onMounted: () => {
              console.log("=====接收到了=====");
              state.show = true;
            },
            onClose: () => {
              state.show = false;
            },
            onAfterLeave: () => {
              // 1. 卸载操作
              unmountFn();
            },
            onConfirm: () => {
              props.onConfirm?.();
              state.show = false;
            },
          },
          h(NCard, null, "11")
        );
      },

      // render: () => {
      //   return h("p");
      // },
    };
  };

  // {
  //   default: () => {
  //     // debugger;
  //     if (!props.subContent) return null;

  //     const valueType = typeof props.subContent;
  //     if (valueType === "string") return props.subContent;

  //     if (valueType === "object")
  //       return h(props.subContent as Component);

  //     if (valueType === "function") {
  //       const fn = props.subContent as () => VNode;
  //       return fn();
  //     }
  //     return;
  //   },
  // }

  const modalNode = document.createElement("div");
  // modalNode.setAttribute("class", "nurse-manager-modal");
  document.querySelector("#app")?.appendChild(modalNode);

  const app = createApp(renderFn());
  app.use(naive).mount(modalNode);

  // 组件卸载操作
  const unmountFn = () => {
    // 1. 卸载应用
    app.unmount();
    modalNode.parentNode?.removeChild(modalNode);
  };
};
